<template>
  <div class="managementj">
    <Title :title='evection'></Title>
    <div>
      <div>
        <el-input
          style="width: 200px"
          v-model="proposer"
          placeholder="请输入申请人姓名"
        ></el-input>
        <el-button type="primary" @click="souFun">查询</el-button>
        <el-button type="primary" @click="chongFun">重置</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="proposer" label="申请人" width="150">
        </el-table-column>
        <el-table-column prop="evection" label="请假事由" width="120">
        </el-table-column>
        <el-table-column prop="leaveTime" label="请假开始时间" width="120">
          <template #default='scope'>
            {{$filters.currencyUSD(scope.row.leaveTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="请假结束时间" width="120">
          <template #default='scope'>
            {{$filters.currencyUSD(scope.row.endTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="needTime" label="总需时长" width="120">
        </el-table-column>
        <el-table-column prop="place" label="出发地址" width="120">
        </el-table-column>
        <el-table-column prop="goOut" label="到达地址" width="120">
        </el-table-column>
        <el-table-column prop="vehicle" label="交通工具" width="120">
        </el-table-column>
        <el-table-column prop="peer" label="同行人员" width="·120">
        </el-table-column>
        <el-table-column fixed="right" prop="approval" label="审批人" width="·120">
        </el-table-column>
        <el-table-column fixed="right" prop="send" label="抄送人员" width="·120">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { reactive, ref } from "@vue/reactivity";
import { list } from "../../api/leave/leave";
import Title from '../../components/title.vue'
export default {
  components:{
        Title
    },
  data() {
    return {
      evection:'出差申请'
    };
  },
  setup() {
    const limit = ref(8);
    const page = ref(1);
    const proposer = ref("");
    const tableData = reactive([]);
    const listFun = () => {
      list({
        limit: limit.value,
        page: page.value,
        proposer: proposer.value,
      }).then((res) => {
        tableData.splice(0,tableData.length)
        if (res.status == 200) {
          res.data.map((v) => {
            tableData.push(v);
          });
        }
      });
    };
    listFun();

    const handleClick = (row) => {
      console.log(row);
    };
    const souFun = () => {
      listFun()
    };
    const chongFun = () => {
      proposer.value = "";
      listFun();
    };
    return {
      tableData,
      proposer,
      handleClick,
      souFun,
      chongFun,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/scss.scss";
.managementj {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
  background: white;
  border-radius: 10px;
}
.header {
  width: 100%;
  height: 30px;
  border-left: $border-left;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  span {
    margin-left: 15px;
  }
}
</style>